import { runScript } from '@/api/helper'
import { useUserStore } from '@/stores/auth'
import { useContainersStore } from '@/stores/containers'
import { message } from 'ant-design-vue'
import { defineComponent, ref, Transition } from 'vue'
import { useI18n } from 'vue-i18n'
// import FolderTree from "./folderTree";

export default defineComponent({
  props: {
    folder: {
      type: Array,
      default: () => [],
    },
  },
  emits: ['hostSwitch', 'uploadFile'],
  setup(props, { emit }) {
    const arrowOpen = ref(false)
    const { t } = useI18n()

    const containerStore = useContainersStore()
    const userStore = useUserStore()
    //获取当前用户的容器信息
    const getContainer = async () => {
      //TODO 多个容器的时候同步哪个
      const containers = await containerStore.M_listContainers({
        label: [`username=${userStore?.user?.username}`],
      })
      return containers
    }

    const downloadAll = async () => {
      const container = await getContainer()
      const containerId = container[0].Id

      await runScript(containerId, 'minio_download')
      message.success('Download Success!')
    }

    const uploadAll = async () => {
      const container = await getContainer()
      const containerId = container[0].Id

      await runScript(containerId, 'minio_up')
      message.success('Upload Success!')
    }

    const actionList = [
      {
        title: t('leftBar.connect'),
        action: () => {
          emit('hostSwitch', false)
        },
      },
      {
        title: t('leftBar.download'),
        action: () => {
          downloadAll()
        },
      },
      {
        title: t('leftBar.upload'),
        action: () => {
          uploadAll()
        },
      },
    ]

    return () => (
      <div id='leftBar' class='z-40'>
        {!arrowOpen.value && (
          <div
            class={[
              'fixed flex items-center justify-center w-4 h-12 transform -translate-y-1/2 bg-gray-200 cursor-pointer top-1/2 rounded-l-md right-0 z-40',
            ]}
            onClick={() => {
              arrowOpen.value = true
            }}
          >
            <span
              class={['text-gray-700 iconify']}
              data-icon='dashicons:arrow-left-alt2'
              data-inline='false'
            ></span>
          </div>
        )}
        <Transition
          enterFromClass='transform translate-x-full'
          enterActiveClass='transition-all ease duration-200'
          leaveToClass='transform translate-x-full'
          enterToClass='transform translate-x-0'
          leaveFromClass='transform translate-x-0'
          leaveActiveClass='transition-all ease duration-200'
        >
          {arrowOpen.value && (
            <div class='fixed right-0 z-40 flex h-screen'>
              <div
                class={[
                  ' flex items-center justify-center w-4 h-12  bg-gray-200 cursor-pointer top-1/2 rounded-l-md transform -translate-y-1/2 absolute -left-4',
                ]}
                onClick={() => {
                  arrowOpen.value = false
                }}
              >
                <span
                  class={['text-gray-700 iconify']}
                  data-icon='dashicons:arrow-right-alt2'
                  data-inline='false'
                ></span>
              </div>
              <div class='relative bg-white'>
                <div class='flex flex-col'>
                  <div class='h-full w-72'>
                    <nav class='px-6 mt-10'>
                      <div>
                        <p class='w-full pb-2 mb-4 ml-2 font-normal text-gray-300 border-b-2 border-gray-100 text-md'>
                          {t('leftBar.hosts')}
                        </p>
                        <a-row gutter={[16, 16]}>
                          {actionList.map((l) => {
                            return (
                              <a-col span={24}>
                                <a-button
                                  type='dashed'
                                  class='!w-full'
                                  onClick={l.action}
                                >
                                  {l.title}
                                </a-button>
                              </a-col>
                            )
                          })}
                        </a-row>
                      </div>
                    </nav>
                  </div>
                </div>
              </div>
            </div>
          )}
        </Transition>
      </div>
    )
  },
})
